import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Attention from '../square/Attention';
import Square from '../square/Square';
import { router } from 'expo-router';
import Translate from '@/components/common/translation/Translate';
const SquareScreen = () => {
  const [activeTab, setActiveTab] = useState<'follow' | 'square'>('square');
  const navigation = useNavigation();

  // 切换显示的内容
  const renderContent = () => {
    if (activeTab === 'follow') {
      return (
        <Attention />
      );
    }
    return (
      <Square />
    );
  };

  return (
    <View style={styles.container}>
      {/* 顶部导航 */}
      <View style={styles.topNav}>
        <View style={styles.topNav_main}>
          {/* 关注 */}
          <TouchableOpacity
            style={[styles.tab, activeTab === 'follow' && styles.activeTab]}
            onPress={() => setActiveTab('follow')}
          >
            <Text style={[styles.tabText, activeTab === 'follow' && styles.activeTabText]}>
              <Translate i18nKey='fololwing'></Translate>
            </Text>
          </TouchableOpacity>

          {/* 广场 */}
          <TouchableOpacity
            style={[styles.tab, activeTab === 'square' && styles.activeTab]}
            onPress={() => setActiveTab('square')}
          >
            <Text style={[styles.tabText, activeTab === 'square' && styles.activeTabText]}>
              <Translate i18nKey='moments'></Translate>
            </Text>
          </TouchableOpacity>
        </View>

        {/* 相机图标 */}
        <TouchableOpacity
          style={styles.cameraIcon}
          onPress={() => router.push('/square/Publish')}
        >
          <Image
            source={require('../../assets/images/camera.png')} // 替换为您的相机图标路径
            style={styles.icon}
          />
        </TouchableOpacity>
      </View>

      {/* 内容区 */}
      {renderContent()}
    </View>
  );
};

export default SquareScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: '#E9FAEF',
  },
  topNav: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#D2F6F2',
    borderBottomWidth: 1,
    borderBottomColor: '#e6e6e6',
  },
  topNav_main: {
    width: 100,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginLeft: 120,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: '#37EBD8',
  },
  tabText: {
    fontSize: 16,
    color: '#000',
  },
  activeTabText: {
    color: '#00',
    fontWeight: 'bold',
  },
  cameraIcon: {
    position: 'absolute',
    right: 16,
  },
  icon: {
    width: 20,
    height: 20,
    tintColor: '#666',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});
